import React, { Component } from 'react'
import Gwarn from '../components/gwarn'
import Gpicker from '../components/gpicker'
import Agree from '../components/Agree'
import Gbutton from '../components/Gbutton'
import Yheader from '../components/Yheader'
export default class Gbuyhouse extends Component {

    constructor(props) {
        super(props)
        this.state = {
            gtitle: '',
            gdescribe: '',
            isredio: false,
            redio: [
                { val: 30, isopt: false },
                { val: 60, isopt: false },
                { val: 90, isopt: false }

            ]

        }
        this.ghandleChange = this.ghandleChange.bind(this)
        this.addTodo = this.addTodo.bind(this)
    }
    ghandleChange(e) {
        this.setState({ gtitle: e.target.value })
        console.log(this.state.gtitle, 5555555)
    }
    isonredio = () => {
        let { isredio } = this.state
        this.setState({
            isredio: !isredio
        })
        console.log(this.state.isredio, '选中状态父')
    }
    addTodo(todo) {
        // console.log(todo)
        // console.log('子组件在触发')
        const a = this.state.redio.findIndex((val) => {
            return val == todo
        })
        console.log(a)

        if (todo.isopt == true) {
            const todoList = [...this.state.redio]
            this.setState({
                redio: todoList.map((item, key) => key === a ? { ...item, isopt: !todo.isopt } : { ...item, isopt: false })
            })
        } else {
            const todoList = [...this.state.redio]
            this.setState({
                redio: todoList.map((item, key) => key === a ? { ...item, isopt: !todo.isopt } : { ...item, isopt: todo.isopt })
            })
        }


    }
    render() {
        const price = [
            {
                label: '高层住宅',
                value: '1',
            },
            {
                label: '小高层住宅',
                value: '2',
            },
            {
                label: '商铺/门面房',
                value: '3',
            },
            {
                label: '厂房',
                value: '4',
            },
            {
                label: '写字楼',
                value: '5',
            },
        ]
        const area = [
            {
                label: '主城区',
                value: '1',
            },
            {
                label: '宿豫区',
                value: '2',
            },
            {
                label: '宿城新区',
                value: '3',
            },
            {
                label: '苏宿园区',
                value: '4',
            },
            {
                label: '开发区',
                value: '5',
            }, {
                label: '湖滨新区',
                value: '6',
            },
        ]

        return (
            <div>
                <Yheader title="我想买个房"></Yheader>
                <Gwarn gtext={'10.00'}></Gwarn>
                <Gpicker title={"小区"} type={'skip'} nickname={"请选择小区或者留空"} routes={this.props} site={'/houseestate'} ></Gpicker>
                <Gpicker title={'房产类型'} type={'antd'} data={price} ></Gpicker>
                <Gpicker title={'区域'} type={'antd'} data={area} ></Gpicker>
                <Gpicker title={"面积"} type={'inpu'} icon={'m²'} sty={{ marginTop: '20px' }}  ></Gpicker>
                <Gpicker {...{ title: '求购预算', type: 'inpu', icon: '万元' }}   ></Gpicker>
                <Gpicker title={"标题"} onChange={this.ghandleChange} type={'inputext'} sty={{ marginTop: '20px' }}  ></Gpicker>
                <Gpicker title={"描述"} type={'inputext'}    ></Gpicker>
                <Gpicker title={"联系人"} type={'skip'} nickname={"请选择"} sty={{ marginTop: '20px' }} routes={this.props} site={'/houseestate'} ></Gpicker>
                <Gpicker type={'choice'} title={'有效时间'} addTodo={this.addTodo} data={this.state.redio} sty={{ marginTop: '20px' }}  ></Gpicker>
                <Agree title={'《宏烨找房网房源信息发布规则》'} onClick={this.isonredio} ischeck={this.state.isredio} ></Agree>
                <Gbutton title={'发布并支付'} ></Gbutton>
            </div>
        )
    }
}
